<template>
    <ModalCom v-bind="$attrs" width="520px" :title="title" @open="modalOpen" :inner-loading="innerLoading" :ok-async="okAsync">
      <Form ref="formFieldsRef" :list="state.controlList" :fields="state.fields"></Form>
    </ModalCom>
</template>

<script setup>
import { reactive, ref, computed } from "vue"
// 跨级组件
import ModalCom from "@/components/modal/index.vue"
import Form from "@/components/form/index.vue"
import { message } from "ant-design-vue"
import { useSelectAsync } from "@/hook"
// 校验函数
import { validateRequired, validatePassword } from "@/utils/index"
// dict
import { useDict } from "@/dict/index"
// api
import { frameCreate, frameDetailed, frameUpdate } from "@/api"
// props
const props = defineProps({
  row: {
    type: Object,
    default: () => ({})
  }
})
// dict
const { useDictList } = useDict()
const { useGetLiteratureAll } = useSelectAsync()
// formFieldsRef
const formFieldsRef = ref(null)
// 文献列表
const literatureOptions = ref([])
const state = reactive({
  controlList: [
    { 
      label: "层架名称", 
      field: "frame_name", 
      control: "input", 
      maxlength: 20,
      rules: [validateRequired("请输入层架名称")]
    },
    { 
      label: "楼层", 
      field: "frame_floor", 
      control: "select", 
      options: useDictList('floorModules'),
      rules: [validateRequired("请选择楼层")]
    },
    { 
      label: "区域", 
      field: "frame_area", 
      control: "select", 
      options: useDictList('areaModules'),
      rules: [validateRequired("请选择区域")]
    },
    { 
      label: "编号", 
      field: "frame_number", 
      control: "input", 
      rules: [validateRequired("请输入编号")]
    },
    { 
      label: "架层", 
      field: "frame_layer", 
      control: "select", 
      options: useDictList('frameLayerModules'),
      rules: [validateRequired("请选择架层")]
    },
    { 
      label: "条码", 
      field: "frame_code", 
      control: "input", 
      maxlength: 16,
      rules: [validateRequired("请输入条码")]
    },
    { 
      label: "文献类型", 
      field: "literature_id", 
      control: "select", 
      options: computed(() => literatureOptions.value),
      name: 'literature_name',
      id: "literature_id",
      mode: "multiple",
      rules: [validateRequired("请选择文献类型")]
    },
  ],
  fields: {
    frame_name: "",
    frame_floor: undefined,
    frame_area: undefined,
    frame_number: "",
    frame_layer: undefined,
    frame_code: "",
    literature_id: []
  }
})
// id
const id = computed(() => props.row?.frame_id)
// title
const title = computed(() => id.value ? "编辑层架" : "添加层架")

const okAsync = () => {
  return new Promise((resolve, reject) => { // then，catch
    formFieldsRef.value.validataForm().then(() => {
      if(id.value) {
        // 编辑
        frameEdit().then((res) => {
          resolve()
        }).catch(() => {
          reject()
        })
      }else{
        // 添加
        frameAdd().then((res) => {
          resolve()
        }).catch(() => {
          reject()
        })
      }
    }).catch(() => {
      reject()
    })
  })
}

/**
 * 添加
 */
const frameAdd = () => {
  return new Promise((resolve, reject) => {
    frameCreate(state.fields).then((res) => {
      message.success(res.msg)
      resolve()
    }).catch(() => {
      reject()
    })
  })
}

/**
 * 编辑
 */
 const frameEdit = () => {
  return new Promise((resolve, reject) => {
    frameUpdate({
      ...state.fields,
      frame_id: id.value
    }).then((res) => {
      message.success(res.msg)
      resolve()
    }).catch(() => {
      reject()
    })
  })
}

/**
 * 获取详情
 */
const getDetailed = () => {
  frameDetailed({frame_id: id.value}).then(res => {
    state.fields = res.content
  })
}

const innerLoading = () => {
  return new Promise((resolve, reject) => { // then，catch
    // 获取详情
    id.value && getDetailed()
    // 获取文献
    useGetLiteratureAll().then(res => {
      literatureOptions.value = res
      resolve()
    }).catch(() => {
      resolve()
    })
  })
}
const modalOpen = () => {
    console.log('打开了')
}
</script>